<#-- 默认私信对话列表 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<base href="${baseURL}">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>私信对话列表 - ${title}</title>
	<meta name="keywords" content="${keywords}"/>
	<meta name="description" content="${description}"/>
	<#-- 获取令牌 -->
	<meta name="csrfToken" content="${token}"/>
	<link href="${commonPath}css/common.css" type="text/css" rel="stylesheet" charset="utf-8">
	<link href="${commonPath}css/themify-icons/style.css" type="text/css" rel="stylesheet">
	<script language="javascript" src="${commonPath}js/tool.js" type="text/javascript"></script>
	<script language="javascript" src="${commonPath}js/ajax.js" type="text/javascript"></script>
	<script language="javascript" src="${commonPath}js/json2.js" type="text/javascript"></script>
	<script type="text/javascript" src="${commonPath}js/lodash.min.js" language="javascript" ></script>
	<script language="javascript" src="${commonPath}js/jquery/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="${commonPath}js/jquery/jquery.letterAvatar.js" language="javascript"></script>
	<link href="${commonPath}js/layer/skin/default/layer.css"  type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="${commonPath}js/layer/layer.js" language="javascript"></script>
</head>
<script type="text/javascript" language="javascript"> 
	
	
</script>
<body>
<#-- 引入页头 -->
<@include action="${newPublic_2}"/>
<div class="skeleton">
	<div class="main wrap clearfix" style="margin-top:71px;">
		<#-- 引入服务导航 -->
		<@include action="${newPublic_4}"/>
		
		<div class="privateMessageChatTop">
			<a href="user/control/privateMessageList" class="back-to-list">&lt&lt返回私信列表</a> 
			<div class="chatInfo">
				<b>与 
					<#if chatUser.account == null || chatUser.account == ''>
						<span class="cancelAccount">此用户账号已注销</span>
					</#if>
					<a href="user/control/home?userName=${chatUser.userName}" target="_blank">
					${chatUser.account} 
					<#if chatUser.nickname != null && chatUser.nickname??>
						(${chatUser.nickname})
					</#if> 
				</a> 的对话</b>
			</div>
		</div>
		<div class="recentlyChatUserModule">
			<div class="title"><h3>最近对话用户</h3></div>
			<ol class="recentlyChatUserList">
				<div id="recentlyChatUserList"></div>
				<input type="hidden" id="commonPath" value="${commonPath}"/>
				<!-- 
				<div class="recentlyChatUser">
					<div class="author">
						<a href="user/control/home?userName=test3">
							<img src="common/default/pc/images/min_avata.png" class="avatar" height="48" width="48">
						</a>
						<div class="info">
							<a class="userName" href="user/control/privateMessageChatList?friendUserName=test3">test3</a>
						</div> 
					</div>
				</div>
				
				<div class="recentlyChatUser">
					<div class="author">
						<a href="user/control/home?userName=test2">
							<img src="common/default/pc/images/min_avata.png" class="avatar" height="48" width="48">
						</a>
						<div class="info">
							<a class="userName" href="user/control/home?userName=test2">test2</a>
						</div> 
					</div>
				</div>
				 -->
			</ol>
		</div>
		
		<script language="javascript" type="text/javascript">
			//查询最近对话用户
			function queryRecentlyChatUser(){
				get_request(function(value){
	           		if(value != ""){
	            		var pageView = JSON.parse(value);
	            		var html = "";
	            		var commonPath = document.getElementById("commonPath").value;
	            		
	            		if(pageView.records != null && pageView.records.length >0){
							
							for(var i = 0; i<pageView.records.length; i++){
								html += "<div class='recentlyChatUser'>";
								html += 	"<div class='author'>";
								var privateMessage =pageView.records[i];
								html += 		"<a href='user/control/privateMessageChatList?friendUserName="+_.escape(privateMessage.friendUserName)+"'>";
								if(privateMessage.friendAvatarName != null){
									html += 		"<img src='"+privateMessage.friendAvatarPath+""+privateMessage.friendAvatarName+"' class='avatar' height='48' width='48'>";
								}else{
									
									html += "<!--[if (IE)]><img width='48px' height='48px' src='"+commonPath+"images/min_avata.png'><![endif]-->";
						
									if(privateMessage.friendNickname != null && privateMessage.friendNickname != ''){
										html += "<!--[if !(IE)]><!--><img width='48px' height='48px' avatar='"+_.escape(privateMessage.friendNickname)+"' ><!--<![endif]-->";
									}else{
										if(privateMessage.friendAccount != null && privateMessage.friendAccount != ''){
											html += "<!--[if !(IE)]><!--><img width='48px' height='48px' avatar='"+privateMessage.friendAccount+"' ><!--<![endif]-->";
										}else{
											html += "<!--[if !(IE)]><!--><img width='48px' height='48px' avatar='' ><!--<![endif]-->";
										}
									
									}

								}
								html += 		"</a>";
								html += 		"<div class='info'>";
								
								if (privateMessage.friendNickname != null && privateMessage.friendNickname){//如果有呢称则显示呢称
									html += 			"<a class='userName' href='user/control/privateMessageChatList?friendUserName="+privateMessage.friendUserName+"'>"+_.escape(privateMessage.friendNickname)+"</a>";
								}else{
									if(privateMessage.friendAccount != null && privateMessage.friendAccount != ''){
										html += 		"<a class='userName' href='user/control/privateMessageChatList?friendUserName="+privateMessage.friendUserName+"'>"+privateMessage.friendAccount+"</a>";
									}else{
										html += 		"<a href='user/control/privateMessageChatList?friendUserName="+privateMessage.friendUserName+"'><span class='cancelAccount'>此用户账号已注销</span></a>";
									}
									
								}
								
								html += 		"</div>";
								html += 	"</div>";
								html += "</div>";
							}
							
	            		}
	            		document.getElementById("recentlyChatUserList").innerHTML = html;
	            		
	            		setTimeout(function () {
							//生成头像
							LetterAvatar.transform();
						}, 100);
	            		
	           		}
	           	},
		 			"user/control/privateMessageList?timestamp=" + new Date().getTime(), true);
			}
			//打开页面时执行
			queryRecentlyChatUser();
		</script>
		
		
		<div class="privateMessageChatRight">
			<#if pageView.records?exists> 
				<div class="privateMessageChatModule">
					<div class="clearfix"></div>
					<#list pageView.records as privateMessage>
						<#if privateMessage.friendUserId == privateMessage.senderUserId><#--如果私信对方用户Id和发送者用户Id相同，则说明消息由对方所发 -->
							<div class="friend">
								<a href="user/control/home?userName=${privateMessage.senderUserName}">
									<#if privateMessage.senderAvatarName != null>
										<img src="${privateMessage.senderAvatarPath}${privateMessage.senderAvatarName}" >
									<#else>
										<!--[if (IE)]><img src="${commonPath}images/min_avata.png"><![endif]-->
										<!--[if !(IE)]><!--><img avatar="${(privateMessage.senderNickname != null && privateMessage.senderNickname??) ?string(privateMessage.senderNickname , privateMessage.senderAccount)}" ><!--<![endif]-->
									</#if> 
								</a>
								<div>
						            <span>
						            	<div class="time">${privateMessage.sendTime}</div>
						            	<i></i>
						            	<em><#noescape>${privateMessage.messageContent}</#noescape></em>
						            	<!-- 
						            	<a class="msg-del"></a> -->
									</span>
								</div>
							</div>
						
						<#else><#-- 自己发的消息-->
							<div class="self">
								<a href="user/control/home?userName=${privateMessage.senderUserName}">
									<#if privateMessage.senderAvatarName != null>
										<img src="${privateMessage.senderAvatarPath}${privateMessage.senderAvatarName}" >
									<#else>
										<!--[if (IE)]><img src="${commonPath}images/min_avata.png"><![endif]-->
										<!--[if !(IE)]><!--><img avatar="${(privateMessage.senderNickname != null && privateMessage.senderNickname??) ?string(privateMessage.senderNickname , privateMessage.senderAccount)}" ><!--<![endif]-->
									</#if> 
								</a>
								<div>
						        	<span>
						        		<div class="time">${privateMessage.sendTime}</div>
						            	<i></i>
						            	<em><#noescape>${privateMessage.messageContent}</#noescape></em>
						            	<!-- 
						            	<a class="msg-del"></a> -->
						            </span>
								</div>
							</div>
						</#if>
					</#list>
					<div class="privateMessageChatPage">
						<@include action="${newPublic_1}"/>
					</div>	
				</div>
				
			</#if>
			
			
			
			<div id = "privateMessageChatForm" class="privateMessageChatForm" style="display: none;">
				
				<textarea id="privateMessageContent" maxlength="500" placeholder="我想说的话..."></textarea>
				
				<div id="messageContent_prompt_error" name="error" class="error" >${(error['messageContent'])!}</div> 
				<div id="privateMessage_prompt_error" name="error" class="error">${error['privateMessage']}</div>
				<#-- 令牌错误 -->
				<div id="token_prompt_error" name="error" class="error">${(error['token'])!}</div>

				<div class="form-action">
					<div class="form" >
						<#-- identificationNumber:识别号：用来区别每次请求 -->
		        		<div id="captchaValue_field" class="form-field" style="display: none; margin-top: 10px;">
				        	<div id="captchaValue_field_error" class="form-field-container">
				        		<div class="form-field-text">
						        	<div class="form-field-input-container">
							        	<input type="hidden" id="captchaKey" name="captchaKey" value="${(returnValue['captchaKey'])!}">
							        	<input id="captchaValue" class="form-field-text-input" type="text" maxlength="4" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
							        	<label class="form-field-label">验证码</label>
									</div>
							        <div class="form-field-image-container">
										<img id="captcha" src="captcha/${(returnValue['captchaKey'])!}.jpg" onClick="replaceCaptcha();" tabindex="4" />
										
							        </div>
							        <div class="form-field-button-container" style="background: #fff;">
							        	<button type="button" class="btn btn-link" tabindex="-1" onClick="replaceCaptcha();">换一幅</button>
							        </div>
							    </div>
							    <div id="captchaValue_prompt_error" name="error" class="form-field-prompt-error"></div>
							</div>
			        	</div>
					
					</div>
					<div class="submitButton-box">
						<a href="javascript:void(0);" onClick="javascript:ajax_submit()" tabindex="6">提&nbsp;交</a>
					</div>
				</div>

			</div>
		</div>
	
	</div>


</div>
<#--引入页脚-->
<@include action="${newPublic_3}"/>


<script language="javascript" type="text/javascript">
	$(".form-field").find(".form-field-input-container").bind("mousedown",function(e) {
		$(this).find(".form-field-text-input").focus();
		
		if($(this).find(".form-field-label").hasClass("form-field-active")){
			return;
		
		}
		$(this).find(".form-field-label").addClass("form-field-active");
	});
	
	$(document).mousedown(function (e) {
        var target = $(e.target);
        if (target.closest(".form-field-input-container").length == 0) {
            $(".form-field-input-container").each(function(){
			    if($(this).find(".form-field-label").hasClass("form-field-active")){
					if($(this).find('input[type="text"]').val() == "" || $(this).find('input[type="password"]').val() == ""){
						$(this).find(".form-field-label").removeClass("form-field-active");
					}
					
				}
			});
        }
    });
    //文本框含有默认值时字段名称缩小
	$(document).ready(function(){
		$(".form-field-input-container").each(function(){
		    if(!$(this).find(".form-field-label").hasClass("form-field-active")){
				if(($(this).find('input[type="text"]').val() != undefined && $(this).find('input[type="text"]').val() != '') 
					|| $(this).find('input[type="password"]').val() != undefined && $(this).find('input[type="password"]').val() != ''){
					$(this).find(".form-field-label").addClass("form-field-active");
				}
				
			}
		});
	});
	
	
	//监听Tab键
    $(document).on('keyup',function (e) {
	    if(e.keyCode == 9){
	    	var input = $(this).find('input:focus');
	    	if (input.length) {
		    	if(!input.parent().parent().find(".form-field-label").hasClass("form-field-active")){
					input.parent().parent().find(".form-field-label").addClass("form-field-active");
				}
		    }
		}
	});
    //解决提交按钮的click和blur事件冲突
	$(document).ready(function(){
		$("input[type='button']").mousedown(function(e){
	    	e.preventDefault();
		});
		$("a[href='javascript:void(0);']").mousedown(function(e){
	    	e.preventDefault();
		});
		
	});

</script>


<script language="javascript" type="text/javascript">
	//点击输入框提示
	function inputBoxClickTip(obj){
	
	
	}
	//离开输入框提示
	function inputBoxOutTip(obj){
		verification(obj.id);
	}
	
	//添加私信页
	function addPrivateMessageUI(){
		//从URL获取对方用户名称
		var friendUserName = getUrlParam("friendUserName");
		get_request(function(value){
          		if(value != ""){
           		var data = JSON.parse(value);
           		for(var returnValue in data){
				
					if(returnValue == "formCaptcha"){
						var formCaptcha = data[returnValue];
	        			if(formCaptcha.showCaptcha == true){//如果显示验证码
	        			
	        			
	        				$("#captchaValue_field").show();
	        				$("#captchaKey").val(formCaptcha.captchaKey);
	        				replaceCaptcha();	
	        			}
	        		}else if(returnValue == "allowSendPrivateMessage"){
	        			if(data[returnValue] == true){//如果允许发私信
	        				$("#privateMessageChatForm").show();
	        			}
	        		}	
        		}
          		}
          	},
 			"user/control/addPrivateMessage?friendUserName="+friendUserName+"&timestamp=" + new Date().getTime(), true);
	}
	$(document).ready(function(){
		//打开页面时执行
		addPrivateMessageUI();
	});
	
	
	//更换验证码
	function replaceCaptcha(){
		var captchaKey = document.getElementById("captchaKey").value;
		document.getElementById("captcha").src = "captcha/"+captchaKey+".jpg?" + Math.random(); 
	}
	//验证参数
	function verification(field){
		$("#"+field+"_prompt_error").hide();
		$("#"+field+"_field_error").removeClass("form-field-error");

		if(field == "captchaValue"){//验证码
			if(!$("#captchaValue_field").is(":hidden")){//如果验证码框显示
				var captchaKey = $("#captchaKey").val().trim();
				var captchaValue = $("#"+field).val().trim();
				if(captchaValue == ""){
					$("#"+field+"_prompt_error").html("验证码不能为空");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				var submitButton_disabled = $(".submitButton-box").find("a").attr("disabled");
				get_request(function(value){
	            	if(value == "false" && submitButton_disabled != "disabled"){
	            		$("#"+field+"_prompt_error").html("验证码错误");
						$("#"+field+"_prompt_error").show();
						$("#"+field+"_field_error").addClass("form-field-error");
	            	}
	            },
			 		"userVerification?captchaKey="+captchaKey+"&captchaValue="+captchaValue+"&timestamp=" + new Date().getTime(), true);
	            	
			}
		}
	}
	//ajax提交方式
	function ajax_submit(){
		var submitButton_disabled = $(".submitButton-box").find("a").attr("disabled");
		if(submitButton_disabled){
			return;
		}
	
		$(".submitButton-box").find("a").attr("disabled","disabled");
		
		//清空错误提示
		$("*[name='error']").each(function(){
			$(this).html("");
		});
		
		var parameter = "";
		//从URL获取对方用户名称
		parameter += "&friendUserName="+getUrlParam("friendUserName");
		//从meta标签获取令牌
		parameter += "&token="+getCsrf();
		
		//验证码Key
		parameter += "&captchaKey="+encodeURIComponent($("#captchaKey").val());
		
		//验证码值
		parameter += "&captchaValue="+encodeURIComponent($("#captchaValue").val());
		
		//私信内容
		var privateMessageContent = $("#privateMessageContent").val().trim();
		if(privateMessageContent != ""){
			parameter += "&messageContent="+encodeURIComponent(privateMessageContent);
		}else{
			$("#messageContent_prompt_error").html("私信内容不能为空");
			$("#messageContent_prompt_error").show();
			
			//按钮设置 disabled="disabled"
			$(".submitButton-box").find("a").removeAttr("disabled");
			return;
		}
		


	   	//删除第一个&号,防止因为多了&号而出现警告: Parameters: Invalid chunk ignored.信息
		if(parameter.indexOf("&") == 0){
			parameter = parameter.substring(1,parameter.length);
		}
		post_request(function(value){
			var data = JSON.parse(value);
			
			for(var returnValue in data){
				
				if(returnValue == "success"){
        			if(data[returnValue] == "true"){
        				layer.msg('发送私信成功,3秒后刷新页面', 
							{
							  time: 3000 //3秒关闭（如果不配置，默认是3秒）
							},function(){//关闭后的操作		
								var url = window.location.href;
								//删除URL中的page参数
								 window.location.href= deleteUrlParam(url,"page");
							}
						);
        				
        			}
        		}else if(returnValue == "error"){
        			
        			var error = data[returnValue];
        			for(var key in error){
        				$("#"+key+"_prompt_error").html(error[key]);
						$("#"+key+"_prompt_error").show();
						$("#"+key+"_field_error").addClass("form-field-error");	
    
        			}
        			if(!$("#captchaValue_field").is(":hidden")){
						replaceCaptcha();
					}
        		}else if(returnValue == "captchaKey"){//如果需要验证码
        			$("#captchaValue_field").show();
       				$("#captchaKey").val(data[returnValue]);
       				replaceCaptcha();		
        		
        		}
        		
        		
        		
        	}
        	//按钮设置 disabled="disabled"
			$(".submitButton-box").find("a").removeAttr("disabled");
		},
			"user/control/addPrivateMessage?timestamp=" + new Date().getTime(), true,parameter);
	}
</script>
</body>

</html>